<!--添加票据页面-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/layout::head">
</head>
<body class="hold-transition sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
    <!-- Navbar 顶部水平导航栏-->
    <nav th:replace="fragments/layout::topNav"></nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container  侧边导航栏-->
    <aside th:replace="fragments/layout::commonAside"></aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>添加票据</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/common/home">Home</a></li>
                            <li class="breadcrumb-item active">添加票据</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">

            <!-- Default box -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">票据信息</h3>

                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                            <i class="fas fa-minus"></i></button>
<!--                        <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">-->
<!--                            <i class="fas fa-times"></i></button>-->
                    </div>
                </div>
                <div class="card-body" id="app">

                    <form class="needs-validation" novalidate id="addTicketForm" >


                        <div class="form-group row">
                            <label for="companyName" class="col-md-2  col-form-label">公司名称 <span
                                    class="text-danger">(*)</span></label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" v-model="ticket.companyName"
                                       id="companyName" name="companyName" required>
                            </div>
                            <div class="invalid-feedback">公司名称不允许为空!</div>
                        </div>
                        <div class="form-group row ">
                            <label for="subject" class="col-md-2  col-form-label">票据主题 <span
                                    class="text-danger">(*)</span></label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="subject" required
                                  v-model="ticket.subject"     minlength="4">
                                <div class="invalid-feedback">票据主题不允许为空,不能小于4个字符!</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 form-group row">
                                <label for="money" class="col-md-3  col-form-label">金额 <span
                                        class="text-danger">(*)</span></label>
                                <div class="col-md-9">
                                    <input type="number" class="form-control"
                                          v-model="ticket.money" id="money" required
                                           min="0">
                                </div>
                                <div class="invalid-feedback">金额必须大于0!</div>
                            </div>

                            <div class="col-md-6  form-group row">
                                <label for="money" class="col-md-3  col-form-label">票据类型</label>
                                <div class="col-md-9">
                                    <select class="custom-select d-block w-100" v-model="ticket.type">
                                        <option>类型一</option>
                                        <option>类型二</option>
                                        <option>类型三</option>
                                        <option>类型四</option>
                                        <option>类型五</option>
                                    </select>
<!--                                    <input type="text" class="form-control" id="类型" required
                                       v-model="ticket.type"    min="0">-->
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="body">内容</label>
                            <textarea class="form-control" id="body" v-model="ticket.body"
                                      rows="5"></textarea>
                        </div>
                        <div class="form-group row">

                            <div class="text-success" id="fileInfo"></div>

                        </div>


                        <button class="btn btn-primary" @click="saved"
                                type="submit">保存票据
                        </button>

                        <button class="btn btn-primary" @click="submited"
                            type="submit">提交票据
                        </button>

                    </form>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    408 TicketManageSystem
                </div>
                <!-- /.card-footer-->
            </div>
            <!-- /.card -->

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->


    <div style="" id="rocket-to-top">
        <div style="opacity: 0; display: block;" class="level-2"></div>
        <div class="level-3"></div>
    </div>



    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->


    <footer th:replace="fragments/layout::footer"></footer>


</div>
<!-- ./wrapper -->


<script th:src="@{/site/js/addTicket.js}"></script>

<!--<script>-->
<!--    $(function () {-->
<!--        checkForm();-->
<!--    })-->
<!--    // 表单输入框数据校验-->
<!--    function checkForm() {-->
<!--        $("#addTicketForm").submit(function (event) {-->
<!--            const f = $(this)  //获取当前对象-->
<!--            if (f[0].checkValidity() === false) {-->
<!--                event.preventDefault()-->
<!--                event.stopPropagation()-->
<!--            }-->
<!--            f.addClass("was-validated")-->
<!--        })-->
<!--    }-->
<!--</script>-->

</body>

</html>
